<template>
  <div class="user-alter">
    <div class="title-msg">我的信息 <span v-if="user.business === 2 && isApplyShow" @click="applyBusinessClick">申请成为商家</span></div>

    <div class="option-site">

      <div class="account item">
        <span>用户账号:</span>
        <input
                disabled
                v-model="user.username"
                class="input"/>
      </div>

      <div class="password item">
        <span>用户密码:</span>
        <OrdInput
                :p-input-style="{'width': '280px'}"
                p-placeholder="请输入8到17位用户密码..."
                :pMaxLength="17"
                v-model="user.password"
                class="input"></OrdInput>
      </div>

      <div class="name-sex-business item">
        <span class="span-name">姓名:</span>
        <OrdInput
                :p-input-style="{'width': '120px'}"
                p-placeholder="请输入用户姓名..."
                :pMaxLength="8"
                v-model="user.name"
                class="input name"></OrdInput>

        <select class="sex" v-model="user.sex">
<!--          <option value="0">未选择</option>-->
          <option value="1">男</option>
          <option value="2">女</option>
        </select>

      </div>

      <div class="birthday item">
        <Calendar title="出生日期:"
                  :p-date="new Date(user.birthday)"
                  @changeDate="date => this.user.birthday = date"
        ></Calendar>
      </div>

      <div class="money item">
        <span>资金:</span>
        <NumInput :p-input-style="{'width': '60px'}"
                  p-placeholder="资金..."
                  :pMaxLength="12"
                  :disabled="true"
                  v-model="user.money"
                  class="input"></NumInput>
      </div>

      <div class="tel item">
        <span>手机号码:</span>
        <NumInput :p-input-style="{'width': '280px'}"
                  p-placeholder="请输入11位纯数字手机号..."
                  :pMaxLength="11"
                  v-model="user.tel"
                  class="input"></NumInput>
      </div>

      <div class="address item">
        <span>地址信息:</span>
        <OrdInput :p-input-style="{'width': '280px'}"
                  p-placeholder="请输入用户地址..."
                  :pMaxLength="40"
                  v-model="user.address"
                  class="input"></OrdInput>
      </div>

      <div class="submit item">
        <button @click="submitClick">确 认 修 改</button>
      </div>

    </div>

  </div>
</template>

<script>
  // 引入公共组件
  import NumInput from 'components/common/input/numInput/IInput'
  import OrdInput from 'components/common/input/ordInput/IInput'
  import Calendar from "components/common/calendar/Calendar";

  // 引入axios网络请求方法
  import {prefectUserInfo} from 'network/user'
  import {setMessage} from 'network/mix'

  import {verToken} from 'common/utils'
  import {mapGetters} from 'vuex'

  import {searchUserByUsername} from 'network/mix'
  export default {
    name: "Info",
    data() {
      return {
        user: {
          username: '',
          password: '',
          name: '',
          sex: 1,
          birthday: new Date(),
          tel: '',
          address: '',
          money: 0,
          business: 2,
        },
        isApplyShow: true
      }
    },
    components: {
      NumInput,
      OrdInput,
      Calendar,
    },
    computed: {
      ...mapGetters ({
        token: 'getToken'
      })
    },
    created() {
      if (this.token) {
        searchUserByUsername(verToken(this.token).username)
          .then(res => {
            // console.log(res);
            this.user = res.user
            this.user.birthday = new Date(res.user.birthday)
            if (this.user.business === null) { // 如果当前的user对象内的business为null时
              this.user.business = 2; // 将business设置为2(解决某些用户身份信息未完善，business为null，导致不能显示成为商家的消息申请)
            }
          })
        .catch(error => {
          console.log(error);
        })

      }
    },
    mounted() {
    },
    methods: {
      applyBusinessClick() {
        if (confirm('您将发送成为商家消息申请?')) {
            let mes = {
              user_username: this.user.username,
              title: '商家身份申请',
              content: '我想成为商家',
              handle: 2,
            }
            this.mSetMessage(mes)
        }
      },

      submitClick() {
        if (this.mUserPwdVer(this.user.password) && this.mUserTelVer(this.user.tel) && this.mUserAddressVer(this.user.address)) {
          this.mAlterUser();
        } else {
          this.$err_ty_toast.toShow('<' + this.user.username + '>用户,您的信息输入有误！！！', 2000);
        }
      },

      /**文本框验证的所有函数*/
      mUserPwdVer(value) { // password密码文本框失去焦点执行的函数
        if (value.length < 8 || value.length > 17) {
          // this.$err_ty_toast.toShow('请保证密码在8位到17位之间！！！', 2000);
          return false;

        } else {
          return true;
        }
      },
      mUserTelVer(value) { // tel电话框失去焦点执行的函数
        if (value.length === 11) {
          return true;
        } else {
          return false;
          // this.$err_ty_toast.toShow('请保证电话号码为11位！！！', 2000);
        }
      },
      mUserAddressVer(value) { // address地址框失去焦点执行的函数
        if (value) {
          return true;
        } else {
          return false;
          // this.$err_ty_toast.toShow('为了确保用户能够正常的接收物流,请填写地址信息！！！', 2000)
        }
      },

      /**修改用户axios网络请求方法*/
      mAlterUser() {
        prefectUserInfo(this.user)
          .then(res => {
            // console.log(res);
            if (res.code === 200) { // code为200表示完善信息成功
              this.$succ_ty_toast.toShow('<' + this.user.username + '>用户,您的信息修改' + '成功', 5000);
            } else if (res.code === 500) {
              this.$err_ty_toast.toShow('<' + this.user.username + '>用户,您的信息修改' + '失败！！！', 2000);
            }
          })
          .catch(err => {
            console.log('<完善信息>网络请求函数问题' + err);
          })
      },
      mSetMessage(message) {
        setMessage(message)
          .then(res => {
            // console.log(res);
            this.$mes_ty_toast.toShow('已提交申请', 5000)
            this.isApplyShow = false
          })
          .catch(error => {
            console.log(error);
            this.$err_ty_toast.toShow('提交申请失败', 2000)
          })
      }
    }
  }
</script>

<style scoped>
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .title-msg span {
    color: goldenrod;
    font-size: 13px;
    font-weight: bold;
  }
  .title-msg span:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #ebebeb;

    /*background-color: green;*/
  }

  .item {
    margin-top: 1.5%;
    margin-left: 35%;

    height: 50px;
    width: 30%;
    line-height: 50px;

    /*background-color: yellow;*/
  }
  .item span {
    color: #4c4c4c;
    font-weight: bold;
  }
  .item .input {
    margin-top: 10px;
  }
  .account .input {
    width: 280px;
    height: 32px;
  }
  .name-sex-business {
    position: relative;
    margin-left: 35%;

    width: 30%;
  }
  .name-sex-business .sex {
    position: absolute;
    top: 10px;
    left: 47%;
    width: 70px;
    height: 30px;
  }
  .name-sex-business .business {
    position: absolute;
    top: 10px;
    left: 70%;

    width: 80px;
    height: 30px;
  }

  .birthday {
    margin-left: 45%;
    padding-left: 30px;
    width: 235px;
  }
  .money {
    position: absolute;
    margin-left: 34%;
    margin-top: -50px;

    width: 100px;
  }

  .submit {
    padding-left: 40px;
  }
  .submit button {
    width: 280px;
    height: 35px;

    color: white;
    font-weight: bold;
    font-size: 20px;

    border-radius: 6px;
    outline: none;
    border: none;
    background-color: green;
  }
  .submit button:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>